<template>
	<div class="app-container">
		<el-card class="card-query mb10">
			<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">

				<el-form-item label="用户名称" prop="uid" v-if="this.hasRole(['admin', 'BOSS', 'DEPT_LEADER'])">

					<el-select v-model="queryParams.uid" filterable placeholder="请选择用户">
						<el-option v-for="item in userData" :key="item.userId" :label="item.nickName"
							:value="item.userId">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="年份" prop="timeData">
					<el-date-picker v-model="queryParams.year" type="year" placeholder="选择年" value-format="yyyy">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="box-card-t">
			<el-row :gutter="20">
				<el-col style="margin-bottom: 20px;" :span="4" v-for="(item,index) in cardtData" :key="index">
					<div class="grid-box" :style="{background:item.bgColor}" @click="handleCardt(item)">
						<div class="grid-box-sj">
							<img :src="require(`../assets/images/rili/rili${index+1}.png`)" alt="" srcset="" />
						</div>
						<div class="grid-box-title mb10">
							应报：<span class="grid-box-num">{{item.yingBao}}</span>
						</div>
						<div class="grid-box-title mb10">
							实报：<span class="grid-box-num">{{item.shiBao}}</span>
						</div>
						<div class="grid-box-title mb10" v-if="item.chae">
							差额：<span class="grid-box-num">{{item.chae}}</span>
						</div>

						<div class="grid-box-wc" v-if="item.id">
							<img :src="require(`../assets/images/duihao.png`)" alt="" srcset="" />
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<el-row :gutter="20">
			<el-col :span="14">
				<el-card class="box-card-b mt20">
					<el-row style="display: flex;align-items: center;justify-content: space-between;" :gutter="20">
						<el-col :span="4" v-for="(item,index) in cardbData" :key="index">
							<router-link :to="item.path">
								<div class="grid-box">
									<div class="grid-box-icon">
										<img :src="item.icon" alt="" />
									</div>
									<div class="grid-box-label">{{item.label}}</div>
								</div>
							</router-link>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="10">
				<el-card class="box-card-echarts mt20">
					<LineChart height="200px" :chartData="chartData"></LineChart>
				</el-card>
			</el-col>
		</el-row>

		<el-dialog top="35vh !important" :title="cardtTitle" :visible.sync="cardtShow" width="400px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="实际金额" prop="actualPayment">
					<el-input type="number" v-model="form.actualPayment" placeholder="请输入金额"></el-input>
				</el-form-item>
				<div style="display: flex;justify-content: center;">
					<el-button type="primary" @click="onSubmit">提 交</el-button>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import LineChart from "./dashboard/LineChart.vue"

	import {
		indexTj,
		addConfirm,
		updateConfirm
	} from "@/api/index";

	import {
		listUser
	} from "@/api/system/user"

	export default {
		components: {
			LineChart
		},
		data() {
			return {
				// 用户角色
				roles: [],
				// 用户数据
				userData: [],
				// 查询条件
				queryParams: {
					uid: null,
					year: null,
				},
				// 月份数据
				cardtData: [],
				// 月份弹出
				cardtShow: false,
				// 月份弹出标题
				cardtTitle: "",
				// 表单
				form: {},
				// 表单验证
				rules: {
					actualPayment: [{
						required: true,
						message: "金额不能为空",
						trigger: "blur"
					}],
				},
				// 功能按钮
				cardbData: [{
						icon: require("../assets/images/icon1.png"),
						label: "常规报销",
						path: "/bxRoutine?formParam=dHJ1ZQ%3d%3d"
					},
					{
						icon: require("../assets/images/icon2.png"),
						label: "常规单据",
						path: "/bxRoutine"
					},
					{
						icon: require("../assets/images/icon2.png"),
						label: "差旅报销",
						path: "/bxTravel?formParam=dHJ1ZQ%3d%3d"
					},
					{
						icon: require("../assets/images/icon2.png"),
						label: "差旅单据",
						path: "/bxTravel"
					},
					{
						icon: require("../assets/images/icon3.png"),
						label: "电子发票",
						path: "/dianzifapiao"
					},
				],
				// 折线图
				chartData: {},
			}
		},
		created() {
			// 从vuex(状态)中获取当前用户有哪些角色
			this.roles = this.$store.getters.roles;
			this.getUserData();
			// 默认查询本人
			this.queryParams.uid = this.$store.state.user.userId;
			// 默认查询本年
			this.queryParams.year = this.parseTime(new Date(), '{y}');
			this.getList();
		},
		methods: {
			// 获取月份数据
			getList() {
				indexTj(this.queryParams).then(res => {
					this.cardtData = res.data.arr;
					this.chartData = res.data.eCharts;
				})
			},
			// 获取用户列表
			getUserData() {
				listUser().then(res => {
					this.userData = res.rows;
				})
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.queryParams.year = this.parseTime(new Date(), '{y}');
				this.handleQuery();
			},
			// 处理月份数据
			handleCardt(row) {
				this.form = {};
				if (row.id) {
					this.cardtTitle = "修改实际金额";
				} else {
					this.cardtTitle = "添加实际金额";
				}
				this.cardtShow = true;
				this.form = row;
			},
			onSubmit() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.form.uid = this.queryParams.uid;
						if (this.form.id) {
							updateConfirm(this.form).then(res => {
								if (res.code === 200) {
									this.$modal.msgSuccess('修改成功');
									this.cardtShow = false;
									this.getList();
								}
							})
						} else {
							addConfirm(this.form).then(res => {
								this.$modal.msgSuccess('新增成功');
								this.cardtShow = false;
								this.getList();
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .card-query {
		width: 100%;
		padding: 0px;

		.el-card__body {
			padding-top: 10px;
			padding-bottom: 10px;

			.el-form-item {
				margin-bottom: 0;
			}
		}
	}

	::v-deep .box-card-t {
		width: 100%;
		padding: 23px 23px 13px 23px;

		.el-card__body {
			padding-top: 10px;
			padding-bottom: 0px;
		}

		.grid-box {
			height: 210px;
			position: relative;
			border-radius: 16px 40px 16px 16px;
			cursor: pointer;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			justify-content: center;
			padding-top: 20px;
			padding-left: 37px;

			.grid-box-sj {
				width: 36px;
				height: 36px;
				position: absolute;
				top: 12px;
				left: 14px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.grid-box-wc {
				width: 36px;
				height: 36px;
				position: absolute;
				bottom: 18px;
				right: 22px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.grid-box-title {
				font-size: 16px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.grid-box-num {
				font-size: 19px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}
		}

		.grid-box::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 115px;
			height: 46px;
			background: url('../assets/images/grid-back.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	::v-deep .box-card-b {
		width: 100%;
		padding: 23px 23px 13px 23px;

		.grid-box {
			height: 128px;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			cursor: pointer;

			.grid-box-icon {
				width: 84px;
				height: 84px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.grid-box-label {
				font-size: 18px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	::v-deep .box-card-echarts .el-card__body {
		padding: 0 10px;
		box-sizing: border-box;
	}
</style>